<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>




    <style type="text/css">
        ul.nav{
            padding:0;
            margin:0;
            list-style-type:none;
            width:80px;
            background-color:#8bd400;
            border:1px solid #486b02;
        }


        /*IE6在列表项的上下添加了额外的空间，为了修复这个BUG，需要将列表上的display属性设置为inline*/
        ul.nav li{
            display: inline;
        }
        /*不对列表项应用样式 而是对其中包含的锚链接应用样式，由此提供更好的浏览器兼容性*/
        ul.nav a{
            display: block;
            color:#2B3f00;
            text-decoration:none;
            border-top:1px solid #e4ffd3;
            border-bottom:1px solid #486b02;
            padding:5px 10px;
        }
        /*解决最后一个链接的底边框与列表的底边框形成双线的问题*/
        ul.nav {
            border:0;
        }
        ul.nav a:hover{
            color:#e4ffd3;
            background-color:#6da203;

        }

    </style>
</head>
<body>
<nav>
    <ul class="nav">
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
    </ul>
</nav>


</body>
</html>